﻿<!DOCTYPE HTML>
<html>
<head>
    <title id='Description'>jqxChart line series with missing data points example</title>
  
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>    
    <script type="text/javascript">
        $(document).ready(function () {
            var sampleData = [29, undefined, 10, 15, 10, undefined, NaN, 30, 25, undefined, 33, 19, 11];

            var settings = {
                title: "Line serie with missing points",
                description: 'Sample line serie with missing and invalid values',
                showLegend: true,
                padding: { left: 5, top: 5, right: 15, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                {
                    text: 'x',
                    valuesOnTicks: false
                },
                colorScheme: 'scheme05',
                seriesGroups:
                    [
                        {
                            type: 'line',
                            source: sampleData,
                            toolTipFormatFunction: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
                                var dataItem = sampleData[itemIndex];
                                return '<DIV style="text-align:left"><b>Index:</b> ' +
                                        itemIndex + '<br /><b>Value:</b> ' +
                                        value + '<br /></DIV>';
                            },
                            valueAxis:
                            {
                                title: { text: 'Value<br>' }
                            },
                            series:
                                [
                                    { emptyPointsDisplay: 'skip', displayText: 'Value', lineWidth: 2, symbolSize: 8, symbolType: 'circle' }
                                ]
                        }
                    ]
            };

            // create the chart
            $("#chartContainer").jqxChart(settings);

            // get the chart's instance
            var chart = $('#chartContainer').jqxChart('getInstance');

            // series type drop down
            var modes = ["skip", "zero", "connect"];
            $("#dropDownMissingPointsMode").jqxDropDownList({ source: modes, selectedIndex: 0, width: '220', height: '25', dropDownHeight: 77 });

            $('#dropDownMissingPointsMode').on('select', function (event) {
                var args = event.args;
                if (args) {
                    var value = args.item.value;

                    chart.seriesGroups[0].series[0].emptyPointsDisplay = value;
                    chart.update();
                }
            });
        });
</script>
</head>
<body>
    <div id='chartContainer' style="width:800px; height:500px"></div>
    <p style="font-family: Verdana; font-size: 12px;">Select missing points display mode:
    </p>
    <div id='dropDownMissingPointsMode'>
    </div>

</body>
</html>
